<script setup>
const props = defineProps(['database'])
const database = props.database

</script>
<template>
    <div id="outer">
        <div>
            <div class="title">
                {{ database.type.toUpperCase() }}
            </div>
            <div style="margin-top: 1em;padding-left: 10px;padding-right: 10px;">
                <el-form-item label="数据库名称">
                    <el-input v-model="database.database" disabled></el-input>
                </el-form-item>
                <el-form-item label="数据库地址">
                    <el-input v-model="database.ip" disabled></el-input>
                </el-form-item>
                <el-form-item label="数据库端口">
                    <el-input v-model="database.port" disabled></el-input>
                </el-form-item>
                <el-form-item label="数据库账户">
                    <el-input v-model="database.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="数据库密码">
                    <el-input v-model="database.password" disabled></el-input>
                </el-form-item>
            </div>
            <div class="footer">
                上传时间： {{ database.create_at }}
            </div>
        </div>
    </div>
</template>
<style scoped>
#outer {
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.title {
    width: 100%;
    text-align: center;
    padding-top: 0.5em;
}

.footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: rgb(120, 120, 120);
    font-size: small;
    padding-right: 10px;
}
</style>